<script setup lang="ts">
  import { useRouter } from 'vue-router'
  import { ArrowDown, CircleCheck, Delete, Switch, Warning } from '@element-plus/icons-vue'
  import { ref } from 'vue'

  defineOptions({
    name: 'HeaderWarrantyPolicy',
  })

  const props = defineProps({
    selection: {
      type: Array,
      default: () => [],
    },
  })

  const emits = defineEmits<{
    (e: 'search', value: string): void
    (e: 'multipleEnable'): void
    (e: 'multipleDisable'): void
    (e: 'multipleDelete'): void
    (e: 'multipleMobileShow'): void
    (e: 'multipleMobileHide'): void
  }>()

  // 全局路由对象
  const router = useRouter()

  // 关键字
  const keyword = ref('')

  /**
   * 添加保修政策
   */
  const onToAddWarrantyPolicy = () => {
    router.push({ path: '/commodity/warranty/policy/list' })
  }

  /**
   * 搜索
   */
  const search = () => {
    emits('search', keyword.value)
  }

  /**
   * 清除
   */
  const onClear = () => {
    keyword.value = ''
    search()
  }
</script>

<template>
  <div class="header-warranty-policy">
    <div class="btn-group">
      <h-plain-button @click="onToAddWarrantyPolicy">添加保修政策</h-plain-button>
      <el-dropdown trigger="click">
        <h-button :disabled="props.selection.length === 0">
          批量操作
          <el-icon>
            <ArrowDown />
          </el-icon>
        </h-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="emits('multipleEnable')">
              <el-icon>
                <CircleCheck />
              </el-icon>
              批量启用
            </el-dropdown-item>
            <el-dropdown-item @click="emits('multipleDisable')">
              <el-icon>
                <Warning />
              </el-icon>
              批量禁用
            </el-dropdown-item>
            <el-dropdown-item @click="emits('multipleDelete')">
              <el-icon>
                <Delete />
              </el-icon>
              批量删除
            </el-dropdown-item>
            <el-dropdown-item @click="emits('multipleMobileShow')">
              <el-icon>
                <Switch></Switch>
              </el-icon>
              移动端显示
            </el-dropdown-item>
            <el-dropdown-item @click="emits('multipleMobileHide')">
              <el-icon>
                <Switch></Switch>
              </el-icon>
              移动端隐藏
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <div class="search">
      <el-input
        v-model.trim="keyword"
        placeholder="请输入关键字"
        clearable
        @clear="onClear"
        @keyup.enter="search"
      ></el-input>
      <h-button type="primary" @click="search">
        <el-icon>
          <Search />
        </el-icon>
        搜索
      </h-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .header-warranty-policy {
    display: flex;
    justify-content: space-between;

    .btn-group {
      display: flex;
      column-gap: 5px;
    }

    .search {
      display: flex;
      column-gap: 5px;

      :deep(.el-input) {
        width: 160px;
      }
    }
  }
</style>
